---
title: My Experience Trying Out Svelte For The First Time
date: 2020-09-27
description: Phew lads, I finally tried svelte after a while and boi oh boi do I love it
tags:
    - svelte
    - website
---

import Update from "~/components/Update.astro";

# Introduction

Phew lads, I finally tried using Svelte and boi oh boi was it an awesome experience. I've been holding my self to try svelte because the editor that I'm using which is **Neovim** doesn't support svelte really well back then. I decided to try it again this time and it works great now.

# Why Svelte?

If you don't know, I usually use React for building a website. I love React and its concept but I want to try something else that is different. Why not Vue? you might ask. Well, to be honest it's hard for me to wrap around my head on how Vue works. It's also because Svelte is quite a new library and it is unique. It doesn't use Virtual DOM like most of SPA framework does.

To be fair, Svelte is [actually a language](https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934) that compiles to pure javascript that we all know and _~~hate~~_ love. There are other languages that also tries to desribe interactive user interface such as [Imba](https://www.imba.io/), [Elm](https://elm-lang.org/), [Marko](https://markojs.com/) and many more.

# My Experience

## Almost feel like not using any framework

My first impression was like, man, this is just like a vanilla html with some sugar on top of it. It looks similar to Vue syntax but more flexible so to speak. Vue's html has to be placed inside of `&lt;template/&gt;` tag whereas Svelte isn't. You can place it literally anywhere. Take a look at this.

```html
<style>
	.heading {
		color: aqua;
	}
</style>

<Navbar title="An epic title">
	<h1 class="heading">
		{heading}
		<h1>
			<div>
				<p>{paragraph}</p>
			</div>
			<footer />

			<script>
				import Footer from "./_components/Footer.svelte";
				let heading = "This is a heading";
				let paragraph = "This is a heading";
			</script>
		</h1>
	</h1></Navbar
>
```

It looks very similar to pure html isn't it? I also prefer Svelte syntax over Vue syntax because it looks more similar to React. What I mean by that is, if you want to run a javascipt expression, they both uses `{}`. For example.

```html
<!-- React -->
<Counter count="{count}" />

<!-- Svelte -->
<Counter count="{count}" />
<!-- or shorthand if you prefer -->
<Counter {count} />

<!-- Vue -->
<Counter v-bind:count="count" />
```

## What I've made with Svelte

I've made 2 websites using Svelte. The first one is [Three Of Something](https://three-of-something.vercel.app/) which is a place where I put the result of small challenge where I implement a UI design that I found to code. I do this challenge every week with both of my friends, [NikarashiHatsu](https://github.com/nikarashihatsu) and [LynSotera](https://github.com/LynSotera). Here's a screenshot of the homepage.

![three of  something](/assets/posts/my-experience-with-svelte/tos.png)

Go visit the website if you're interested ツ

The second website that I made is [Kanaizu](https://kanaizu.vercel.app/). It's basically some sort of quiz app where you need to type the correct romaji for the shown kana. The main reason of why I made this app is because I want to learn more about Svelte and to help my friend memorise Japanese kana. Here's the homepage of it.

![kanaizu](/assets/posts/my-experience-with-svelte/kanaizu.png)

Again, go visit the website if you're interested ツ

To be fair, I made those using [Routify](https://routify.dev/). Basically, **Routify handles the routing**. I didn't use [Sapper](https://sapper.dev) because it's too much for what I need. I just need a basic routing and Routify is perfect.

## What I've learned so far

After making those 2 sites, I of course learned some new stuff and I'm so happy that I finally decided to try Svelte.

### Components

On React, a component is a function that returns a JSX. It looks something like this.

```javascript
export default () => <p>Hello World!</p>;
```

On Svelte, the whole file is a component. It uses `.svelte` extension and the syntax is basically a superset of HTML. It looks something like this.

```html
<style>
	/* some stylings */
</style>

<div>I'm an HTML</div>

<script>
	// some logic goes here
</script>
```

The order doesn't really matter but I prefer `style-markup-script` because I like the markup to be in the middle of the stylings and the script.

### Props

Apparently, props in svelte is just an exported `let` variable. So what you would do to make a prop is something like this.

`Counter.svelte`

```html
<div>{count}</div>

<script>
	export let count;
</script>
```

`App.svelte`

```html
<div>
	<Counter count="{1}" />
</div>

<script>
	import Counter from "./counter.svelte";
</script>
```

### Scoped stylings

Styling in Svelte is scoped! Because you write the styling on the same file as the rest of the component, it became scoped. You can still change the global styling using `:global()` though.

### Global state

Next thing that I learned is global state or store. Usually in React, I need `React.Context` to store a global state. On Svelte, I need to use `svelte/store`. Global state is much simpler in Svelte in my opinion. Here's a comparison between them.

`context.js`

```javascript
import React, { createContext, useState } from "react";

export const CountContext = createContext(null);

export const CountProvider = ({ children }) => {
	const [count, setCount] = useState(0);
	return <CountContext.Provider value={{ count, setCount }}>{children}</CountContext.Provider>;
};
```

`app.js`

```javascript
import React, { useContext } from "react";
import { CountProvider, CountContext } from "./context";

export default () => {
	const { count, setCount } = useContext(CountContext);
	return (
		<CountProvider>
			<p>{count}</p>
			<button onClick={() => setCount(count + 1)}>Increment</button>
			<button onClick={() => setCount(count - 1)}>Decrement</button>
		</CountProvider>
	);
};
```

Well, it looks like a lot but it's actually quite simple if you know how React Context works. Now let's compare it with Svelte.

`stores.js`

```javascript
import { writable } from "svelte/store";

export const count = writable(0);
```

`app.svelte`

```html
<p>{$count}</p>
<button on:click="{count.update(n" ="">n + 1)}>Increment</button>
<button on:click="{count.update(n" ="">n - 1)}>Decrement</button>

<script>
	import { count } from "./stores";
</script>
```

I mean, just look at how simple it is. Bare in mind that this post isn't meant to explain every single thing that Svelte has to offer so please refer to the [official website](https://svelte.dev/tutorial/writable-stores) for more explanation ツ

Actually, Svelte also has [Context API](https://svelte.dev/tutorial/context-api). Since I'm still learning, please read [this article](https://medium.com/better-programming/6-ways-to-do-component-communications-in-svelte-b3f2a483913c) for better understanding. It's such a good article and you should definitely check it out!

### Animation and transition directive

Svelte provides [animation](https://svelte.dev/tutorial/animate) and [transition](https://svelte.dev/tutorial/transition) that you can use to animate your components. The usage is also simple, what you would do is just something like this.

`Transition.svelte`

```html
<button on:click="{isVisible" ="!isVisible}">Toggle</button>
{#if isVisible}
<p transition:fade>This text is visible</p>
{/if}

<script>
	import { fade } from "svelte/transition";
	let isVisible = false;
</script>
```

The transition directive is triggered whenever an element leaves or enter the DOM tree. More details about transition directive is available [here](https://svelte.dev/docs#transition_fn).

I used transition for [Kanaizu](https://kanaizu.vercel.app) but I haven't tried the animate directive since I haven't found the use case for it.

### Logic blocks

Last one is logic blocks. On React, you can use curly braces `{}` to write some Javascript logics and return something that will get rendered. Here's an example.

```javascript
import React, { useState } from "react";

export default function Counter() {
	const [isVisible, setVisible] = false;
	return (
		<div>
			{isVisible && <div>I'm Visible!</div>}
			<button onClick={() => setVisible(!isVisible)}>Toggle</button>
		</div>
	);
}
```

It's a little bit different on Svelte. It looks something like this.

```html
{#if isVisible}
<p>I'm Visible!</p>
{/f}
<button on:clock="{isVisible" ="!isVisible}">Toggle</button>

<script>
	let isVisible = false;
</script>
```

I like them both so it doesn't really matter. There's also quite a few on [Svelte's docs](https://svelte.dev/docs#if).

# Conclusion

Well, I fell in love with this _language_. It's so simple yet it's so good. Sorry if the highlighting looks weird in this post because I couldn't make it work for Svelte or JSX syntax :p

I want to rebuild this blog using [Sapper](https://sapper.dev) + [MDSveX](https://mdsvex.com/) in the future. Don't get me wrong, [Gatsby](https://www.gatsbyjs.com/) is great. I just want to try out something new. <i style="color: #eaeaea">Svelte's bundle size is also smaller compared to React, that's also why ツ</i>

<Update date="2020-11-01">

If you're reading this then you're currently at my 'new' website that I mentioned earlier =)

</Update>

Thanks for reading this! You should definitely try Svelte, you wouldn't regret it. Anyway, have a good day folks! =)
